Intro

Demo

Components

• code-editor

  The code editor works best uncontrolled. Instead of keeping the value synchronised from a higher order component, it is best to simply let the code editor update itself, unless you strictly need to change the value programatically.

  Attributes

  value	The current value of the editor. Use ”\n" for line-breaks.
  language	"css" | "html" | "javascript" | "typescript" | "json" - Default is "javascript"
  lib-source	Additional type definitions.
  theme	Theme to be used for rendering. Available themes are: 'vs-dark' (default), 'vs', 'hc-black', 'hc-light'.
  construction-options	Construction Options object parsed into the monaco editor. Refer to the monaco editor docs for more info.Link

  Events

  change	Fires whenever the content is modified
  blur	Fires whenever the editor looses focus

  Slots

  default

  Shown while editor is loading

• code-diff-editor

  This component will show a diff between 2 values. It works very similar to the code-editor above with the only difference being that it takes 2 value arguments that is going to be diff'ed.

  Attributes

  orig-value	The original value.
  modified-value	The modified value.
  language	"css" | "html" | "javascript" | "typescript" | "json" - Default is "javascript"
  lib-source	Additional type definitions.
  theme	Theme to be used for rendering. Available themes are: 'vs-dark' (default), 'vs', 'hc-black', 'hc-light'.
  construction-options	Construction Options object parsed into the monaco editor. Refer to the monaco editor docs for more info.Link

  Events

  change

  Fires whenever the content in the "modified"-editor is changed

  Slots

  default

  Shown while editor is loading

Actions

• runCodeEditorAction

  Users can run actions on the code-editor by pressing F1. The same actions can be run programatically with this action. This is particularly useful for formatting on blur etc.

  Arguments

  id	Should match the id of the editor you want to run the command on. You can leave this empty if you only have one editor and the editor has an empty id as well.
  action	The action id you want to run. One of:   "actions.find",   "actions.findWithSelection",   "cursorRedo",   "cursorUndo",   "deleteAllLeft",   "deleteAllRight",   "editor.action.addCommentLine",   "editor.action.addCursorsToBottom",   "editor.action.addCursorsToTop",   "editor.action.addSelectionToNextFindMatch",   "editor.action.addSelectionToPreviousFindMatch",   "editor.action.blockComment",   "editor.action.clipboardCopyWithSyntaxHighlightingAction",   "editor.action.commentLine",   "editor.action.copyLinesDownAction",   "editor.action.copyLinesUpAction",   "editor.action.deleteLines",   "editor.action.detectIndentation",   "editor.action.duplicateSelection",   "editor.action.fontZoomIn",   "editor.action.fontZoomOut",   "editor.action.fontZoomReset",   "editor.action.formatDocument",   "editor.action.formatSelection",   "editor.action.gotoLine",   "editor.action.goToReferences",   "editor.action.indentationToSpaces",   "editor.action.indentationToTabs",   "editor.action.indentLines",   "editor.action.indentUsingSpaces",   "editor.action.indentUsingTabs",   "editor.action.inPlaceReplace.down",   "editor.action.inPlaceReplace.up",   "editor.action.insertCursorAbove",   "editor.action.insertCursorAtEndOfEachLineSelected",   "editor.action.insertCursorBelow",   "editor.action.insertLineAfter",   "editor.action.insertLineBefore",   "editor.action.inspectTokens",   "editor.action.joinLines",   "editor.action.jumpToBracket",   "editor.action.marker.next",   "editor.action.marker.nextInFiles",   "editor.action.marker.prev",   "editor.action.marker.prevInFiles",   "editor.action.moveCarretLeftAction",   "editor.action.moveCarretRightAction",   "editor.action.moveLinesDownAction",   "editor.action.moveLinesUpAction",   "editor.action.moveSelectionToNextFindMatch",   "editor.action.moveSelectionToPreviousFindMatch",   "editor.action.nextMatchFindAction",   "editor.action.nextSelectionMatchFindAction",   "editor.action.onTypeRename",   "editor.action.openLink",   "editor.action.outdentLines",   "editor.action.peekDefinition",   "editor.action.previousMatchFindAction",   "editor.action.previousSelectionMatchFindAction",   "editor.action.quickCommand",   "editor.action.quickFix",   "editor.action.quickOutline",   "editor.action.refactor",   "editor.action.referenceSearch.trigger",   "editor.action.reindentlines",   "editor.action.reindentselectedlines",   "editor.action.removeCommentLine",   "editor.action.rename",   "editor.action.revealDefinition",   "editor.action.revealDefinitionAside",   "editor.action.selectHighlights",   "editor.action.selectToBracket",   "editor.action.setSelectionAnchor",   "editor.action.showAccessibilityHelp",   "editor.action.showContextMenu",   "editor.action.showDefinitionPreviewHover",   "editor.action.showHover",   "editor.action.smartSelect.expand",   "editor.action.smartSelect.shrink",   "editor.action.sortLinesAscending",   "editor.action.sortLinesDescending",   "editor.action.sourceAction",   "editor.action.startFindReplaceAction",   "editor.action.toggleHighContrast",   "editor.action.toggleTabFocusMode",   "editor.action.transformToLowercase",   "editor.action.transformToTitlecase",   "editor.action.transformToUppercase",   "editor.action.transpose",   "editor.action.transposeLetters",   "editor.action.triggerParameterHints",   "editor.action.triggerSuggest",   "editor.action.trimTrailingWhitespace",   "editor.action.wordHighlight.trigger",   "editor.fold",   "editor.foldAll",   "editor.foldAllBlockComments",   "editor.foldAllMarkerRegions",   "editor.foldLevel1",   "editor.foldLevel2",   "editor.foldLevel3",   "editor.foldLevel4",   "editor.foldLevel5",   "editor.foldLevel6",   "editor.foldLevel7",   "editor.foldRecursively",   "editor.toggleFold",   "editor.unfold",   "editor.unfoldAll",   "editor.unfoldAllMarkerRegions",   "editor.unfoldRecursively"
  args	Optional array of arguments for the action.

  Events

  error

  Fires whenever the action cannot be performed. The error event should inform